<template>
  <a-row class="w-[80%] mx-auto">
    <a-col :span="16" class="p-6">
      <a-flex justify="space-between">
        <a-typegraphy-paragraph>
          <a-typegraphy-text class="text-2xl font-bold">精选文章</a-typegraphy-text>
          <a-space :size="10" class="pl-10">
            <a-typography-link href="#" v-for="(item, index) in list" :key="index">
              <a-typegraphy-text :class="`${item.checked ? 'bg-[#4F6EF6] text-[#fff] p-2' : 'text-[#333] '}`">
                {{ item.title }}
              </a-typegraphy-text>
            </a-typography-link>
          </a-space>
        </a-typegraphy-paragraph>
        <a-space :size="10" class="text-[18px] text-[#ccc]">
          <LeftCircleFilled />
          <RightCircleFilled />
        </a-space>
      </a-flex>
      <a-row class="w-full my-8">
        <a-col :span="12" class="mb-4">
          <a-typography-link href="#" v-for="(item, index) in list1.slice(0, 5)" :key="index" class="block pb-4">
            <a-typegraphy-title level="1" class="flex">
              <a-typegraphy-text
                :class="`block text-[#fff] text-[16px] w-7 h-7 flex items-center justify-center ml-2 rounded-full ${
                  index == 0 ? 'bg-[#E9B754]' : index == 1 ? 'bg-[#C8D2E4]' : index == 2 ? 'bg-[#BF9D85]' : 'bg-[#EFF3F6] text-[#ACB0B1]'
                }`"
                >{{ index + 1 }}</a-typegraphy-text
              >
              <a-typegraphy-text class="px-2 flex-1 text-[#333] text-[16px] overflow-hidden text-ellipsis whitespace-nowrap">{{
                item.title
              }}</a-typegraphy-text>
            </a-typegraphy-title>
            <p class="px-10 text-[#999] overflow-hidden text-ellipsis whitespace-nowrap">{{ item.desc }}</p>
          </a-typography-link>
        </a-col>
        <a-col :span="12" class="mb-4">
          <a-typography-link href="#" v-for="(item, index) in list1.slice(5, 10)" :key="index" class="block pb-4">
            <a-typegraphy-title level="1" class="flex">
              <a-typegraphy-text
                :class="`block text-[16px] w-7 h-7 flex items-center justify-center ml-2 rounded-full bg-[#EFF3F6] text-[#ccc]`"
              >
                {{ index + 6 }}</a-typegraphy-text
              >
              <a-typegraphy-text class="flex-1 px-2 text-[#333] text-[16px] overflow-hidden text-ellipsis whitespace-nowrap">{{
                item.title
              }}</a-typegraphy-text>
            </a-typegraphy-title>
            <p class="px-10 text-[#999] overflow-hidden text-ellipsis whitespace-nowrap">{{ item.desc }}</p>
          </a-typography-link>
        </a-col>
      </a-row>
    </a-col>

    <a-col :span="8" class="p-6">
      <a-flex justify="space-between">
        <a-typegraphy-text class="text-2xl font-bold">热门关注</a-typegraphy-text>
        <a-typegraphy-text class="text-[#999]">热度</a-typegraphy-text>
      </a-flex>
      <a-row class="w-full pt-4">
        <a-col :span="24" class="mb-4" v-for="(item, index) in list2" :key="index">
          <a-typography-link href="#" class="flex justify-between">
            <a-space>
              <a-typegraphy-text
                :class="`block text-[#fff] w-6 h-6 flex items-center justify-center ml-2 rounded-full ${
                  index == 0 ? 'bg-[#E9B754]' : index == 1 ? 'bg-[#C8D2E4]' : index == 2 ? 'bg-[#BF9D85]' : 'text-[#ACB0B1]'
                }`"
                >{{ index + 1 }}</a-typegraphy-text
              >
              <a-typegraphy-text class="block px-2 max-w-[300px] text-[#333] text-[16px] overflow-hidden text-ellipsis whitespace-nowrap">{{
                item.title
              }}</a-typegraphy-text>
              <a-tag color="#F40303" class="!py-0 !px-1" v-if="item.hot">热</a-tag>
            </a-space>
            <a-typegraphy-text class="text-[#B2B1B6]" v-if="item.hot">{{ item.rank }}</a-typegraphy-text>
          </a-typography-link>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script setup>
  const list = [{ title: '行业新闻', checked: true }, { title: '论文知识' }, { title: '前沿学术' }, { title: '相关问题' }];
  const list1 = [
    {
      title: '熊友才教授，当选巴基熊友才教授，当选巴基熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
    {
      title: '熊友才教授，当选巴基斯坦科学院外籍院士',
      desc: '近日，大连理工大学官网更新显示，此前担任大连理工大学校长助理.',
    },
  ];
  const list2 = [
    {
      title: 'Deep learning',
      rank: 9999,
      hot: true,
    },
    {
      title: '人工智能',
      rank: 9999,
      hot: true,
    },
    {
      title: 'Human-level control through dHuman-level control through dHuman-level control through d...',
      rank: 9999,
      hot: true,
    },
    {
      title: '人脸识别',
      rank: 9999,
      hot: false,
    },
    {
      title: 'AlphaFold2 技术突破',
      rank: 9998,
      hot: true,
    },
    {
      title: '量子计算新纪元',
      rank: 9997,
      hot: true,
    },
    {
      title: '脑机接口研究进展',
      rank: 9996,
      hot: false,
    },
    {
      title: '可控核聚变突破',
      rank: 9995,
      hot: false,
    },
    {
      title: '元宇宙基础设施发展',
      rank: 9994,
      hot: false,
    },
    {
      title: '基因编辑技术伦理',
      rank: 9993,
      hot: false,
    },
  ];
</script>
<style scoped></style>
